/*主界面样式*/

.client-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main {
    width: 1000px;
    height: 740px;
    background-color: rgb(238, 238, 238);
    border-radius: 5px;
    display: flex;

    z-index: 2;
}

.main .left {
    width: 280px;
    height: 100%;
    background-color: rgb(46,50,56);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.main .right {
    width: 720px;
    height: 100%;
    padding: 0 20px;
}

.cover {
    width: 100%;
    height: 100%;
    background-image: url(../image/Default.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    /*让cover和div重合*/
    position: absolute;
    top: 0;
    left: 0;

    z-index: 1;

    /*使背景图模糊*/
    filter: blur(30px);
}

.main .left .user {
    height: 80px;
    font-size: 20px;
    line-height: 80px;
    color: white;
    padding: 0 20px;
}

.main .left .search {
    height: 40px;
    padding: 0 20px;

    /*使元素水平排列*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.main .left .search input {
    height: 34px;
    width: 200px;
    line-height: 34px;
    font-size: 14px;
    color: white;
    background: rgb(38, 41, 46);

    /*去除边框和轮廓线*/
    border: none;
    outline: none;

    padding-left: 10px;
    border-radius: 5px;
}

.main .left .search button {
    height: 34px;
    width: 34px;
    border: none;
    outline: none;

    background-color: rgb(38, 41, 46);

    border-radius: 5px;
    background-image: url(../image/搜索.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center center;
}

.main .left .search button:active {
    background-color: grey;
}

.main .left .tab {
    height: 50px;
    display: flex;
    align-items: center;
}

.main .left .tab .tab-session {
    height: 100%;
    width: 50%;
    background-image: url(../image/会话2.png);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: center center;
}

.main .left .tab .tab-friend {
    height: 100%;
    width: 50%;
    background-image: url(../image/用户.png);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: center center;
}

.main .left .list {
    height: 570px;

    /*如果内容超过了长度则提供一个滚动条*/
    overflow: auto;
}

.main .left .list li {
    height: 60px;
    padding: 10px 20px;
    color: white;

    border-top: 1px solid black;
}

.main .left .list .selected {
    background-color: rgb(46,54,65);
}
/*会话列表样式*/
.main .left .list li h3,
.main .left .list li p {
    height: 20px;
    font-size: 14px;
    line-height: 20px;
}
.main .left .list li p {
    color: rgba(255,255,255,0.7); /* 次要信息弱化 */
}


/*好友请求样式*/

/* 好友请求容器 */
.request-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%; /* 继承父级li的60px高度 */
}

/* 用户信息区块 */
.user-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 40px; /* 总高度60px - 上下各10px内边距 */
    flex: 1;
    min-width: 0; /* 防止内容溢出 */
}
.user-meta p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 按钮组样式 */
.action-group {
    display: flex;
    gap: 8px; /* 按钮间距 */
    flex-shrink: 0; /* 防止按钮被压缩 */
}

/* 按钮通用样式 */
.action-group button {
    padding: 4px 12px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: opacity 0.2s;
}

/* 同意按钮配色 */
.agree-btn {
    background: #34C759;
    color: #fff;
}

/* 拒绝按钮配色 */
.reject-btn {
    background: #FF3B30;
    color: #fff;
}

/* 悬停效果 */
.action-group button:hover {
    opacity: 0.9;
}
/* 好友请求动画效果 */
.friend-request {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}


/*好友列表样式*/
.main .left .list li h4 {
    height: 40px;
    line-height: 40px;
    font-size: 20px;
}

.hide {
    display: none;
}

/*将会话列表的滚动条隐藏起来，看不到条但可以使用*/
.list::-webkit-scrollbar {
    display: none;
}


.main .right .title {
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    text-align: center;
    border-bottom: 1px solid #ccc;
}

.main .right .message-show {
    height: 550px;

    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;

    overflow: auto;
}

.main .right .message-show .message {
    margin-top: 10px;
    /*宽度是默认100%，高度不去显示设定，由消息的多少来决定高度*/
    display: flex;
}
 /*消息列表滚动条样式*/
.message-show::-webkit-scrollbar {
    width: 6px;
}

.message-show::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.message-show::-webkit-scrollbar-track {
    background-color: transparent;
}


/* 确保flex布局下左右对齐 */
.main .right .message-show .message-left {
    justify-content: flex-start;
}

.main .right .message-show .message-right {
    justify-content: flex-end;
}

.main .right .message-show .message-left .box h4{
    text-align: left;
}
.main .right .message-show .message-right .box h4{
    text-align: right;
}

/*.main .right .message-show .message .box {*/
/*    !*box凸显出左右的效果，宽度不能是100%*!*/
/*    width: 500px;*/
/*}*/


.main .right .message-show .message .box {
    /* 移除固定宽度 */
    max-width: 80%; /* 限制最大宽度为容器的80% */
    min-width: 40px; /* 可选，避免过窄 */
    display: inline-block;
    word-wrap: break-word; /* 允许长单词换行 */
}

.main .right .message-show .message .box h4 {
    /*去除加粗*/
    font-weight: normal;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
}

.main .right .message-show .message .box p {
    padding: 20px;
    border-radius: 10px;
}

/*给消息设置气泡（背景色）*/
.main .right .message-show .message-left .box p {
    background-color: #fff;
}

.main .right .message-show .message-right .box p {
    background-color: rgb(137,217,97);
}

.main .right .message-input {
    /*方便设置尺寸*/
    display: block;
    width: 100%;
    height: 100px;
    border: none;
    outline: none;
    
    margin-top: 2px;
    background-color: rgb(238,238,238);
    padding: 10px;
    resize: none;
}

.main .right .ctrl {
    height: 35px;
    display: flex;
    justify-content: flex-end;
}

.main .right .ctrl button {
    height: 35px;
    width: 100px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.main .right .ctrl button:active {
    background-color: grey;
    color: white;
}



.main .search-user-area {
    width: 720px;
    height: 100%;
    padding: 0 20px;
}

.main .search-user-area .title {
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    text-align: center;
    border-bottom: 1px solid #ccc;
    color: #333;
    font-weight: 500;
}

.user-show {
    list-style: none;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    overflow-y: auto;  /* 启用垂直滚动 */
    padding-right: 5px; /* 为滚动条留出空间 */
    /* 添加高度限制 */
    flex: 1; /* 关键：撑满剩余空间 */
    max-height: calc(100% - 50px);
}

/* 滚动条样式 */
.user-show::-webkit-scrollbar {
    width: 6px;
}

.user-show::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.user-show::-webkit-scrollbar-track {
    background-color: transparent;
}

.user-show li {
    background-color: #fff;
    border-radius: 8px;
    padding: 12px 15px;
    margin-top: 8px;
    margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

    display: flex;
    flex-direction: row; /* 改为水平方向 */
    align-items: center;
    gap: 15px;
}

.user-show h4 {
    font-size: 17px;
    color: #333;
    font-weight: 500;
    flex: 1;
    margin-bottom: 0;
    text-align: center;
}

.user-show input {
    border: 1px solid #eaeaea;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.3s;
    flex: 2;
    margin-bottom: 0;
}

.user-show input:focus {
    border-color: #07C160;
}

.user-show button {
    background-color: #07C160;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 0;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;     /* 禁止按钮缩小 */
    width: 80px;        /* 固定按钮宽度 */
}

.user-show button:hover {
    background-color: #06AD56;
}

.user-show button:active {
    background-color: #059B4D;
}


/*li {*/
/*    position: relative; !* 关键：为子元素创建定位参考系 *!*/
/*    padding-right: 40px; !* 为红点预留空间 *!*/
/*}*/
/*!* 未读消息提示样式 *!*/
/*.unread-badge {*/
/*    position: absolute;*/
/*    right: 8px;          !* 根据图片右侧间距调整 *!*/
/*    top: 50%;*/
/*    transform: translateY(-50%);*/
/*    background: #ff4444;*/
/*    color: white;*/
/*    border-radius: 50%;*/
/*    padding: 2px 6px;*/
/*    font-size: 12px;*/
/*    min-width: 20px;*/
/*    text-align: center;*/
/*}*/

